<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>


    <div id="app">
        <cpn v-bind:cmovides="movides" :message="message"></cpn>
    </div>


</body>

<template id="cpnid"> 
  <div>
    {{cmovides}}
    {{message}}
  </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    //父传子 props
    const app = new Vue({
        el: '#app',
        data: {
            // message: '你好啊',
            movides: ['巴啦啦小魔仙', '喜羊羊与灰太狼', '天线宝宝']
        },
        components: {
            cpn: {
                template: '#cpnid',
                //数组写法
                // props: ['cmovides', 'message'],
                //对象写法
                props: {
                    cmovides: Array,
                    message: {
                        type: String,
                        default: 'sss'
                    }
                },
                data() {
                    return {

                    }
                },
            }
        }
    })
</script>